<template>
  <div class="model-log-container">
    <a-tabs v-model="activeKey" @change="handleTabChange">
      <a-tab-pane key="1" tab="操作记录" v-if="$hasPermission('queryOperationLog')">
        <operation-log-list />
      </a-tab-pane>
      <a-tab-pane key="2" tab="调用日志" v-if="$hasPermission('queryCallLog')">
        <call-log-list />
      </a-tab-pane>
      <a-tab-pane key="3" tab="Python批量测试" v-if="$hasPermission('searchTestResult')">
        <python-batch-testing />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { Tabs } from 'ant-design-vue'
import OperationLogList from './components/OperationLogList.vue'
import CallLogList from './components/CallLogList.vue'
import PythonBatchTesting from './components/PythonBatchTesting.vue'

export default defineComponent({
  name: 'ModelLog',
  components: {
    [Tabs.name]: Tabs,
    [Tabs.TabPane.name]: Tabs.TabPane,
    OperationLogList,
    CallLogList,
    PythonBatchTesting,
  },
  data() {
    return {
      activeKey: '1',
    }
  },
  mounted() {
    // 根据路由参数设置默认选中的标签页
    const { currentTab } = this.$route.query
    if (currentTab) {
      this.activeKey = currentTab
    }
  },
  methods: {
    handleTabChange(key) {
      // 根据选中的标签页加载对应的数据
      this.activeKey = key
      // 切换标签页时，更新路由参数
      this.$router.push({ query: { currentTab: key } })
    },
  },
  created() {

  },
})
</script>

<style lang="less" scoped>
.model-log-container {
  padding: 24px;
  background: #fff;
}
</style>
